<script setup>
import LeftNavBar from './LeftNavBar.vue';
import Content from './Content.vue';
import RightOther from './RightOther.vue';

</script>

<template>
  <div class="home-page">
    <div class="wrapper">
      <!-- 左侧导航栏 -->
      <LeftNavBar></LeftNavBar>

      <!-- 中间文章列表 -->
      <Content></Content>

      <!-- 右侧其他 -->
      <RightOther></RightOther>
    </div>
  </div>
</template>

<style scoped>
.home-page {
  padding-top: 20px;
  background-color: #f2f3f5;
  /* 设置一个最小高度，当文章数目较少时也能让背景色填充 */
  min-height: calc(100vh - 60px);
}

.home-page .wrapper {
  width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}
</style>